<template>
  <div style="background: #f5f6fa; height: 100vh">
    <div
      style="
        padding: 30px 20px;
        background: #f5f6fa;
        height: 80%;
        position: relative;
      "
    >
      <div class="back" @click="goBack">
        <svg
          class="icon"
          aria-hidden="true"
          style="
            margin-right: 10px;
            font-size: 16px;
            font-weight: bold;
            width: 16px;
            height: 16px;
          "
        >
          <use xlink:href="#icon-fanhui" /></svg
        >返回
      </div>
      <div>
        <!-- 选项卡 -->
        <div class="tabs_panel">
          <div class="tabs_items active_current">
            <!-- {{missionary_title}} -->新增患者教育
          </div>
        </div>
        <div
          style="display: flex; justify-content: flex-end; margin-bottom: 15px"
        >
          <el-button type="primary" @click="save">保存</el-button
          ><el-button>预览</el-button><el-button>保存并群发</el-button>
        </div>
        <!-- 选项卡内容 -->
        <div class="tabs_table_panel">
          <div class="patient-info-table">
            <el-form
              ref="elForm"
              label-width="60px"
              label-position="left"
              :model="formData"
              :rules="rules"
              size="small"
            >
              <div style="display: flex">
                <el-form-item
                  label="标题"
                  prop="patEduTitle"
                  style="margin-right: 20px"
                >
                  <el-input
                    style="width: 150px"
                    v-model="formData.patEduTitle"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="作者"
                  style="width: 66%"
                  prop="patEduAuthor"
                >
                  <el-input v-model="formData.patEduAuthor"></el-input>
                </el-form-item>
              </div>
              <el-row>
                <el-form-item prop="patEduContent" label-width="0px">
                  <div>
                    <tinymce v-model="formData.patEduContent" :height="300" />
                  </div>
                </el-form-item>
              </el-row>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  savePatientEducation,
  updatePatientEducation,
} from "@/api/back-management/patient_education";
import Tinymce from "@/components/Tinymce";
export default {
  name: "new_patient_education",
  components: { Tinymce },
  data() {
    return {
      formData: {
        patEduTitle: "",
        patEduAuthor: "",
        patEduContent: "",
      },
      rules: {
        patEduTitle: [
          {
            required: true,
            message: "请输入标题",
            trigger: "blur",
          },
        ],
        patEduAuthor: [
          {
            required: true,
            message: "请输入作者",
            trigger: "blur",
          },
        ],
        /* content: [
          {
            required: true,
            message: "请输入编辑器",
            trigger: "blur",
          },
        ], */
      },
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    save() {
      console.log(this.formData.patEduContent);
      let params = {
        ...this.formData,
      };
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          savePatientEducation(params).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: res.message,
                type: "success",
              });
              this.$router.push({
                path: "follow_up_set",
                query:{
                   activeName: "first", //查询表单名
                }
              });
            } else {
              this.$message({
                message: res.message,
                type: "error",
              });
            }
          });
        }
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
    goBack() {
      this.$router.push({
        path: "follow_up_set",
        query: {
          activeName: "first", //查询表单名
        },
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.editor-content {
  margin-top: 20px;
}
.tabs_panel {
  display: flex;
  margin-bottom: 15px;

  .tabs_items {
    font-size: 18px;
    font-weight: bold;
    color: #a1a8b3;
    margin-right: 40px;
    cursor: pointer;
    &.active_current {
      color: #32353b;
    }
  }
}
.patient-info-table {
  padding: 12px 20px;
  background: #fff;
  border-radius: 4px;
}
.table_box {
  border: 1px solid #dfe6ec;
  border-bottom: none;
  margin-top: 12px;
}

.btn_query {
  padding: 10px 20px;
  color: #fff;
  background: #05afc8;
  border-radius: 4px;
  font-size: 14px;
  margin-left: 20px;
  cursor: pointer;
}
.back {
  display: flex;
  align-items: center;
  font-size: 14px;
  position: absolute;
  padding: 7px 15px;
  border-radius: 4px;
  color: #49515c;
  background: #fff;
  border: 1px solid #e1e3e6;
  right: 20px;
  cursor: pointer;
  top: 23px;
}

.user_text {
  margin-right: 20px;
  font-size: 15px;
}
.user_name {
  font-size: 18px;
  font-weight: bold;
}
.first_title {
  padding-top: 17px;
  font-weight: bold;
  font-size: 15px;
  margin-right: 24px;
  cursor: pointer;
}
.active_first_title {
  border-bottom: 3px solid #05afc8;
  color: #05afc8;
}
.user_border {
  position: relative;
}
.user_border ::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 30px;
  top: 10px;
  right: 0;
  background: #f0f1f2;
}
.block {
  margin-top: 20px;
}
.icon {
  margin-right: 14px;
  font-size: 22px;
  font-weight: bold;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.icon_box .icon:last-child {
  margin-right: 0;
}
</style>
<style lang='scss'>
.el-dialog__header {
  border-bottom: 1px solid #e4e7ed;
  .el-dialog__headerbtn .el-dialog__close {
    color: #909399;
  }
}
.el-dialog__footer {
  border-top: 1px solid #e4e7ed;
  padding-bottom: 10px;
}
.el-dialog--center .el-dialog__body {
  padding: 20px 95px 0px;
}
</style>
